<template>
    <div class="customer_source_box">
        <div class="top-box">
            <el-button type="primary" @click="showAddSourceFun">新增放弃原因</el-button>
        </div>

        <el-table
            id="tableRef"
            :row-key="getRowKey"
            :row-class-name="tableRowClassName"
            header-row-class-name="table_header_title"
            class="configure-table-box"
            :data="tableList">
            <el-table-column width="55">
                <template #default>
                    <img src="@/assets/customer/sort-icon.png" class="sortImg" alt="" />
                </template>
            </el-table-column>
            <el-table-column label="序号" prop="weight" />
            <el-table-column prop="typeName" label="原因名称">
                <template #default="{ row }">
                    {{ row.name || '--' }}
                </template>
            </el-table-column>
            <el-table-column label="状态">
                <template #default="{ row }">
                    {{ row.status == 1 ? '已开启' : '未开启' }}
                </template>
            </el-table-column>
            <el-table-column label="类型">
                <template #default="{ row }">
                    {{ row.is_system == 1 ? '系统' : '自定义' }}
                </template>
            </el-table-column>
            <el-table-column label="创建人">
                <template #default="{ row }">
                    {{ row.user_name || '系统' }}
                </template>
            </el-table-column>
            <el-table-column label="创建时间" width="200">
                <template #default="{ row }">
                    {{ row.created_at || '--' }}
                </template>
            </el-table-column>
            <el-table-column label="操作" width="300px">
                <template #default="{ row }">
                    <el-button size="small" @click="changeStatus(row)">{{
                        row.status == 2 ? '开启' : '关闭'
                    }}</el-button>
                    <template v-if="row.is_system !== 1">
                        <el-button size="small" @click="showAddSourceFun(row)">编辑</el-button>
                        <el-button size="small" @click="del(row)">删除</el-button>
                    </template>
                </template>
            </el-table-column>
            <template #empty>
                <img class="emty_img" src="@/assets/noData.png" alt="" />
                <div class="emty_title">{{ '暂无数据' }}</div>
            </template>
        </el-table>

        <!-- <ZWPagination ref="PaginationRef" @submit="getFile" /> -->
        <AddReason ref="AddReasonRef" @refresh="getTableList" />
    </div>
</template>

<script lang="ts" setup>
import ZWPagination from '@/components/ZWPagination.vue';
import Sortable from 'sortablejs';
import { nextTick, ref, onMounted } from 'vue';
import AddReason from './AddReason.vue';
import { invalidList, invalidDel, invalidUpdateStatus, invalidSort } from '@/api/customer/clubManage/abandonReason';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useStore } from '@/store';
import { getSetionId, tableH, reSize } from '@/utils/utils';
const store = useStore();
const showTable = ref(true);
const tableList = ref([{ invalid_id: 1 }, { invalid_id: 2 }]);
const AddReasonRef = ref(null);
const pageParam = { page: 1, page_size: 15 };
const tabH = ref('500px');
// 表格的自适应高度
const getTableH = (val?: boolean) => {
    const h = parseInt(tableH('.configure-table-box'));
    tabH.value = h - 120 + 'px';
};
// 排序的方法
const setSortableFun = () => {
    // let nowIndex;
    let copyTableList;
    nextTick(() => {
        const SortableBox = new Sortable(
            document.querySelector('#tableRef').querySelector('.el-table__body-wrapper tbody'),
            {
                animation: 100,
                sort: true,
                delay: 0,
                delayOnTouchOnly: false,
                onChoose: function (evt: any) {
                    // nowIndex = evt.oldIndex;
                },
                onEnd: (evt: any) => {
                    copyTableList = JSON.parse(JSON.stringify(tableList.value));
                    const data = copyTableList.splice(evt.oldIndex, 1)[0];
                    copyTableList.splice(evt.newIndex, 0, data);
                    let next_id, pre_id;
                    if (copyTableList[evt.newIndex - 1]) {
                        pre_id = copyTableList[evt.newIndex - 1].invalid_id;
                    }
                    if (copyTableList[evt.newIndex + 1]) {
                        next_id = copyTableList[evt.newIndex + 1].invalid_id;
                    }
                    const arr: any = [];
                    copyTableList.forEach((item: any, index: number) => {
                        arr.push({ id: item.id, sort: index + 1 });
                    });
                    invalidSort({ sorts: arr }).then((r: any) => {
                        getTableList();
                    });
                }
            }
        );
    });
};
nextTick(() => {
    getTableList();
});

const showAddSourceFun = (val: any) => {
    if (val) {
        AddReasonRef.value.appDialog.editInfo = val;
    } else {
        AddReasonRef.value.appDialog.editInfo = {};
    }
    AddReasonRef.value.appDialog.visible = true;
};

// 改变状态
const changeStatus = (val: any) => {
    const id = val.id;
    let status = val.status;
    status = status == 1 ? 2 : 1;
    if (status == 2) {
        ElMessageBox.confirm(
            `关闭后，员工放弃线索时不能选择该原因，先前已设置为该放弃原因的客户将不受影响。您确定要关闭吗？`,
            '提示',
            {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning'
            }
        ).then(() => {
            if (!val.id) {
                ElMessage.error('当前数据异常，请稍后再试');
                getTableList();
                return;
            }
            val.status = status;
            invalidUpdateStatus({ invalid_id: id, status }).then((r: any) => {
                val.status = status;
            });
        });
        return;
    }
    val.status = status;
    invalidUpdateStatus({ invalid_id: id, status }).then((r: any) => {
        val.status = status;
    });
};
// 获取表格数据
const getTableList = () => {
    invalidList({}).then((r: any) => {
        showTable.value = false;
        tableList.value = r.data;
        setTimeout(() => {
            showTable.value = true;
            nextTick(() => {
                setSortableFun();
            });
        });
    });
    getTableH();
};
// 分页
const getFile = (val: any) => {
    pageParam.page = val.page;
    pageParam.page_size = val.page_size || pageParam.page_size;
    getTableList();
};
// 删除
const del = (val: any) => {
    ElMessageBox.confirm(
        `删除后，员工放弃线索时不能选择该原因，先前已设置为该放弃原因的客户将不受影响。您确定要删除吗？`,
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning'
        }
    ).then(async () => {
        if (!val.id) {
            ElMessage.error('当前数据异常，请稍后再试');
            getTableList();
            return;
        }
        await invalidDel({ invalid_id: val.id });
        getTableList();
        ElMessage.success('删除成功');
    });
};
const getRowKey = (row: any) => {
    return row.id;
};
onMounted(() => {
    reSize(getTableH);
});
</script>

<style lang="scss" scoped>
.customer_source_box {
    height: calc(100vh - 246px);
    display: flex;
    flex-direction: column;

    :deep(.el-table) {
        flex: 1;

        .el-table__empty-block {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }
}

.top-box {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 16px;
}

.configure-table-box {
    border: solid 1px #eee;

    .sortImg {
        width: 13px;
        height: 11px;
    }

    .table-item {
        display: flex;
        justify-content: flex-start;

        div {
            width: 80px;
            height: 24px;
            background: #fff;
            border-radius: 2px;
            border: 1px solid #eaeaea;
            line-height: 24px;
            margin-right: 10px;
            font-size: 14px;
            font-family: STHeitiSC-Light, STHeitiSC;
            font-weight: 300;
            color: #33302d;
            text-align: center;
            cursor: pointer;
        }
    }
}

.pageLimit-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 82px;

    .total-box {
        width: 200px;
        font-size: 14px;
        font-family: STHeitiSC-Light, STHeitiSC;
        color: #33302d;

        span {
            color: #ff6b00;
        }
    }
}
</style>
